<template>
  <section id="tinymce-editor"></section>
</template>

<script>
import '@/components/Editor/TinyMce/tinymce.min.js'
import '@/components/Editor/TinyMce/themes/silver/theme.min.js'
import '@/components/Editor/TinyMce/icons/default/icons.min.js'
import '@/components/Editor/TinyMce/models/dom/model.min.js'
import '@/components/Editor/TinyMce/langs/zh-Hans.js'
import '@/components/Editor/TinyMce/plugins/codesample/plugin.min.js'
import '@/components/Editor/TinyMce/plugins/code/plugin.min.js'
export default {
    props:{
        value:{
            type:String,
            default:''
        }
    },
    mounted(){
        tinymce.init({
            selector:'#tinymce-editor',
            height:1000,
            language:"zh-Hans",
            branding:false,
            resize:false,
            plugins:'codesample code',
            toolbar:['undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | codesample | code'

            ],
            setup:(editor)=>{
                editor.on('init',(e)=>{
                    editor.setContent(this.value);
                })
            },
            init_instance_callback:(editor)=>{
                editor.on('input',(e)=>{
                    this.$emit('input',e.target.innerHTML);
                });
                editor.on('change',(e)=>{
                    this.$emit('input',e.level.content);
                });
            }
        })
    }
}
</script>

<style scoped>
@import url('./skins/ui/oxide/skin.min.css');
</style>